<template>
  <zh-app style="font-family: '阿里巴巴普惠体'">
    <zh-navbar title="房产使用查询" color="#85a5ff" linear="right" />

    <zh-sheet :round="5" :margin="[30, 30, 30, 30]">
      <zh-form
        @submit="submit"
        v-model="data.queryparm"
        inputAlign="left"
        :label-width="160"
        :margin="[0, 0]"
        :padding="[0, 0]"
      >
        <zh-form-input
          field="realPropertycx"
          v-model="data.queryparm.realPropertycx"
          :rules="[{ required: true, message: '请输入完整不动产权证号查询' }]"
          placeholder="请输入完整不动产权证号后再点击查询"
          @clear="onClear"
          required
          showClear
          :transprent="true"
        ></zh-form-input>
        <zh-form-item :border="false">
          <view class="flex-1 mr-32" style="margin: 0 auto">
            <zh-button
              form-type="submit"
              label="查询"
              block
              :disabled="data.queryparm.clicked ? true : false"
            ></zh-button>
          </view>
        </zh-form-item>
      </zh-form>
    </zh-sheet>
    <zh-spin :load="data.loading" tip="信息加载中，请耐心等候">
      <view v-if="data.form.realProperty">
        <zh-card title="房产使用信息" :round="5">
          <template v-slot:status>
            <view class="flex">
              <tm-icon
                :name="data.form.hiddenFlag ? 'tmicon-eye-slash' : 'tmicon-eye'"
                style="margin: 0 10rpx"
                @tap="changeSensitive"
              ></tm-icon>
            </view>
          </template>
          <template v-slot:content>
            <zh-form :padding="[0, 0]" :margin="[0, 0]" :transprent="true">
              <zh-form-item label="不动产证号" :border="false">
                <zh-text :label="data.form.realProperty"></zh-text>
              </zh-form-item>
              <zh-form-item label="单元号" :border="false">
                <zh-text :label="data.form.realPropertyNum"></zh-text>
              </zh-form-item>
              <zh-form-item label="坐落" :border="false">
                <zh-text :label="data.form.address"></zh-text>
              </zh-form-item>
              <zh-form-item
                label="使用年份"
                :border="false"
                v-for="(item, index) in data.form.houseUsageRecordVOList"
                :key="index"
              >
                <zh-text :label="item.year"></zh-text>
              </zh-form-item>
            </zh-form>
          </template>
        </zh-card>
        <zh-sheet :round="5" color="#d8efff" :padding="[10, 20]">
          <zh-text
            color="grey"
            style="text-indent: 2em"
            label="查询结果供参考。"
          ></zh-text>
        </zh-sheet>
      </view>

      <zh-sheet
        v-if="!data.form.realProperty && data.showWin"
        :margin="[30, 0, 30, 30]"
      >
        <zh-result
          title="未使用"
          subTitle="该不动产权证号未查询到3年内使用记录"
          :showBtn="false"
        ></zh-result>
      </zh-sheet>
    </zh-spin>
  </zh-app>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
// 初始化
onMounted(() => {});
// ------------------变量区------------------------------
// 主数据
const data = reactive({
  loading: false,
  // 表单
  form: {
    address: "",
    realPropertyNum: "",
    schoolName: "",
    year: "",
    realProperty: "",
  } as any,
  hiddenFlag: true,
  queryparm: {
    realPropertycx: "",
    clicked: false,
  },
  showWin: false,
});
// ------------------方法区------------------------------

// 提交
const submit = () => {
  data.queryparm.clicked = true;
  data.loading = true;
  let realProperty = data.queryparm.realPropertycx;
  if (realProperty != null && realProperty.length > 0) {
    const params: any = {
      realProperty: realProperty,
      hiddenFlag: data.hiddenFlag,
    };
    $api.common.send
      .post("eduStudentHouse0008", params)
      .then((res: any) => {
        data.queryparm.clicked = false;
        data.form = res.result || {};
        data.showWin = true;
        data.loading = false;
      })
      .catch(() => {
        data.queryparm.clicked = false;
        data.showWin = false;
        data.loading = false;
      });
  } else {
    data.showWin = false;
    data.queryparm.clicked = false;
    data.loading = false;
  }
};
// 获取脱敏/正常数据
const changeSensitive = (e: string) => {
  data.hiddenFlag = !data.hiddenFlag;
  submit();
};
const onClear = () => {
  data.hiddenFlag = true;
  data.showWin = false;
  data.loading = false;
  data.form = {};
};
</script>

<style lang="scss" scoped></style>
